<template>
  <div :class="className" :style="{ height: height, width: width }" />
</template>

<script>
import * as echarts from "echarts";

require("echarts/theme/macarons"); // echarts theme

export default {
  props: {
    className: {
      type: String,
      default: "chart"
    },
    width: {
      type: String,
      default: "100%"
    },
    height: {
      type: String,
      default: "232px"
    },
    chartData: {
      type: Array,
      required: true
    },
    chartColor: {
      type: Array,
      default: () => ["#3FC529", "#FBC225", "#E74629", "#E2E7EE"]
    },
    titleShow: {
      type: Boolean,
      default: false
    },
    value: {
      type: String,
      default: "0"
    }
  },
  data() {
    return {
      chart: null,
      total: 11
    };
  },
  watch: {
    chartData: {
      deep: true,
      handler(val) {
        if (val) {
          this.setOptions(val);
        }
      }
    }
  },
  mounted() {
    this.$nextTick(() => {
      // setTimeout(()=>{
      this.initChart();
      // },80)
    });
  },
  beforeDestroy() {
    if (!this.chart) {
      return;
    }
    this.chart.dispose();
    this.chart = null;
  },
  methods: {
    initChart() {
      this.chart = echarts.init(this.$el, "macarons");
      this.setOptions(this.chartData);
    },
    setOptions(chartData) {
      let value = this.value;
      if (isNaN(this.value)) {
        value = 0;
      } else {
        value = this.value;
      }
      this.chart.setOption({
        color: this.chartColor,
        title: {
          show: this.titleShow,
          zlevel: 0,
          text: ["{value|" + value + "%}", "{name|产出}"].join("\n"),

          top: "center",
          left: "center",
          // textAlign: "center",
          textStyle: {
            rich: {
              value: {
                color: "#303133",
                fontSize: 15,
                fontWeight: "bold",
                lineHeight: 30
              },
              name: {
                color: "#909399",
                lineHeight: 16
              }
            }
          }
        },
        tooltip: {
          show: false,
          trigger: "item",
          formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        legend: {
          show: false,
          left: "center",
          bottom: "10"
          // data: ['Industries', 'Technology', 'Forex', 'Gold', 'Forecasts']
        },
        grid: {
          left: 10,
          right: 10,
          bottom: 10,
          top: 10
          // containLabel: true
        },
        series: [
          {
            name: "",
            type: "pie",
            radius: ["45%", " 55%"],
            avoidLabelOverlap: false,
            label: {
              //标签
              normal: {
                show: !this.titleShow,
                position: "outer",
                // formatter: '{d}%, {c} \n\n',
                // 模板变量有 {a}, {b}，{c}，{d}，{e}，分别表示系列名，数据名，数据值等。
                // formatter: "{a_set|{b}\n{c}%}",
                formatter: function(params) {
                  let str = "";

                  str = params.name + "\n" + params.value;

                  return str;
                },
                borderWidth: 20,
                borderRadius: 4,
                padding: [90, -30],
                textStyle: {
                  color: "#7c8ca5"
                }
                // rich: {
                //   a_set: {
                //     color: "#7F8FA4",
                //     lineHeight: 20,
                //     align: "center",
                //   },
                //   c_set: {
                //     color: "#000",
                //   },
                // },
              }
            },
            labelLine: {
              normal: {
                show: true, //引线隐藏
                length: 20,
                length2: 20
              }
            },
            emphasis: {
              label: {
                show: true,
                fontSize: "12"
                // fontWeight: "bold",
              }
            },

            data: chartData
          }
        ]
      });
    }
  }
};
</script>
